<!--  -->
<template>
	<div class='dashboard-profile' :style="monthStyle">
		<div class="profile">
			<Clock formatter="现在是 YYYY年MM月DD日 HH:mm:ss dddd"/>
			<h1>{{am}}好，{{name}}</h1>
			<div class="message">{{message}}</div>
			<Weather @onLoad="handleLoadWeather"/>
			<div class="avatar-wrapper" ref="avatarRef" style="--rx:0deg; --ry:0deg">
				<img :src="avatar" class="user-avatar">
			</div>
		</div>
		<canvas id="canvas"></canvas>
		<div class="profile-bg" :style="{'--bg': 'url('+avatar+')'}"></div>
	</div>
</template>

<script>
import RainSnow from '@/utils/rainsnow'
import Weather from '@/components/Weather/index.vue'
import Clock from '@/components/Clock'
import { mapGetters } from 'vuex'
const msgs = [
				"美好新一天, 今天的工作也要顺顺利利哦。",
				"工作激励着我们不断前进，每一次的努力都是为了实现自己的目标和梦想。",
				"每一次努力都是对成功的靠近，让我们一起激发工作正能量，勇往直前。",
				"工作中的每一个挑战都是一次成长的机会。用积极的态度面对困难，激发自己的潜能，你就能不断超越自己。",
				"成功不是偶然的，它是努力工作的结果。只有全身心投入，才能收获满满的回报。",
				"不要等待机会，而是要创造机会。工作不仅仅是完成任务，更是要超越自我，追求卓越。",
				"勇敢地追求目标，不断地超越自我。工作中所遇到的困难只是暂时的，只要坚持努力，就一定能够克服。",
				"工作不是任务，而是机会，是成长和进步的催化剂。每一份汗水都铸造着你的未来。",
				"谁愿意脚踏实地认真地工作，谁就能做出很多成绩，就能超群出众。",
				"在工作的道路上，你已经展现了出色的能力和专业素养，继续保持，未来必将更加光明。",
				"每一份工作都是一次机会，每一次机会都值得全力以赴。"
			]
export default {
	name: 'DashboardProfile',
	//import引入的组件需要注入到对象中才能使用
	components: {
		Weather,
		Clock
	},
	data() {
		//这里存放数据
		return {
			season: this.$moment().format("Q"),
			month: this.$moment().format("M"),
			am: this.$moment().format("a"),
			message: msgs[parseInt(Math.random() * msgs.length)],
			xRange: [-20,20],
			yRange: [-20,20],	//图片3D偏移的范围，-10是最左边，10最右边，0中间
		};
	},
	//监听属性 类似于data概念
	computed: {
		...mapGetters([
			'avatar',
			'name',
		]),
		seasonStyle(){
			let colors = ['#13ce66','#1682e6','#f08200','#90c5f7'];
			return {
				'--season':colors[parseInt(this.season)-1]
			}
		},
		monthStyle(){
			let colors = ['#f1e46a','#ff8a75','#f5d754','#61ee6d', '#ec8bd7','#f1b355','#f19b55','#4adaa3', '#c655f3','#f36d55','#be3a19','#f13535'];
			return {
				'--month':colors[parseInt(this.month)-1]
			}
		}
	},
	//监控data中的数据变化
	watch: {},
	//生命周期 - 创建完成（可以访问当前this实例）
	created() {

	},
	//生命周期 - 挂载完成（可以访问DOM元素）
	mounted() {
		this.$nextTick(()=>{
			let card = this.$refs.avatarRef;
			card.onmousemove = (e)=>{
				const {offsetX, offsetY} = e;
				const {offsetWidth, offsetHeight} = card;
				const ry = this.getRoateDeg(this.yRange,offsetX,offsetWidth);
				const rx = -this.getRoateDeg(this.xRange,offsetY,offsetHeight);
				card.style.setProperty('--rx', `${rx}deg`);
				card.style.setProperty('--ry', `${ry}deg`);
			}
			card.onmouseleave = ()=>{
				card.style.setProperty('--rx', `0deg`);
				card.style.setProperty('--ry', `0deg`);
			}
		})
	},
	//方法集合
	methods: {
		getRoateDeg(range,value,length){
			return (value/length) * (range[1] - range[0]) + range[0];
		},
		handleLoadWeather(val){
			let config = {
				id: "canvas",
				type: "snow", // drop类型，有 rain or snow
				maxNum: 100,
				numLevel: 2,
				speed : [0.4,3.5], //速度范围
				size_range: [0.5,3.5],//大小半径范围
				wind_direction: -115, //角度
				hasBounce: false, //是否有反弹效果or false,
				hasGravity: false //是否有重力考虑
			}
			let rainsnow = new RainSnow(config);
			// rainsnow.setConfig(config).start();
			if(val.wea.indexOf("雨")!=-1){
				config.type = "rain";
				config.hasBounce = true;
				config.hasGravity = true;
				rainsnow.setConfig(config).start();
			}else if(val.wea.indexOf("雪")!=-1){
				config.type = "snow";
				config.hasBounce = false;
				config.hasGravity = false;
				rainsnow.setConfig(config).start();
			}else{
				rainsnow.stop();
			}
		}
	},
}
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
.dashboard-profile{
	position: relative;
	height: 100%;
	background-color: var(--month);
	// background-color: #f1e46a;
	border-radius: 10px;
	overflow: hidden;
	
	.profile{
		position: absolute;
		inset: 0;
		color:#fff;
		z-index: 3;
		padding: 20px;

		h1{
			font-size:28px;
			margin-bottom: 10px;
			font-weight: bold;
		}

		.datetime{
			font-size:12px;
		}
		.message{
			font-size:14px;
			opacity: 0.8;
			padding-right:100px;
		}

		.weather-wrapper{
			position: absolute;
			bottom:20px;
			font-size: 14px;
		}

		.avatar-wrapper{
			position: absolute;
			width: 80px;
			height: 80px;
			right:20px;
			top:20px;
			overflow: hidden;
			border-radius: 100%;
			border:4px solid #fff;
			box-shadow: -1px -1px 10px rgba(0,0,0,0.2);
			transition: all 0.2s;
			&:hover{
				transform:perspective(500px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
				box-shadow: -4px -4px 20px rgba(0,0,0,0.6), 4px 4px 20px rgba(0,0,0,0.6);
			}

			img{
				width:100%;
				height: 100%;
			}
		}
	}

	&:hover{
		.avatar-wrapper{
			box-shadow: -2px -2px 10px rgba(0,0,0,0.5);
		}
	}
	#canvas{
		position: absolute;
		z-index: 2;
		width: 100%;
		height: 100%;
	}
	.profile-bg{
		position: absolute;
		inset: -10px;
		background-image: var(--bg);
		background-position: center;
		background-size: cover;
		background-repeat: no-repeat;
		z-index: 1;
		filter: blur(12px);
		opacity: 0.6;
	}
}
</style>